<template>
    <view>

        <block v-if="searchEnable">

            <!-- ********************** 下拉框 - 带搜索 START ********************** -->
            <view class="form-item picker-section" v-if="selectList && selectList.length>0">
                <!-- 下拉选择器 -->
                <view class="custom-select-container">
                    <view class="mask" @click="clickMask" v-show="showMask"></view>

                    <!-- 搜索框 -->
                    <view class="search-input-container">
                        <uni-icons type="search" size="20" color="#999" class="search-icon"></uni-icons>
                        <input class="search-input" :placeholder="placeholder" v-model="selectSearchText"
                            @input="filterOptions" @focus="focusInput" placeholder-style="color: #999;" />
                        <uni-icons v-if="selectSearchText" type="clear" size="20" color="#999" class="clear-icon"
                            @click="clearSearch"></uni-icons>
                    </view>
                    <!-- 下拉列表 -->
                    <view class="dropdown-list" v-if="selectShowDropdown">
                        <scroll-view class="dropdown-scroll" scroll-y="true">
                            <view v-for="i in selectOptionsNew" :key="i.id" class="dropdown-item"
                                :class="{'selected': selectValue === i.id}" :id="index" @click="selectItem(i,index)">
                                <text class="item-text">{{i.title}}</text>
                                <uni-icons v-if="selectValue === i.id" type="checkmark" size="16"
                                    color="#2979FF"></uni-icons>
                            </view>
                            <view v-if="selectOptionsNew.length === 0" class="empty-tips">
                                <text>暂无匹配选项</text>
                            </view>
                        </scroll-view>
                    </view>

                </view>
            </view>

            <view class="form-item picker-section" v-else>
                <view class="custom-select-container">
                    <view class="search-input-container">
                        <uni-icons type="search" size="20" color="#999" class="search-icon"></uni-icons>
                        <input class="search-input" placeholder="暂无数据" placeholder-style="color: #999;"
                            disabled="false" />
                    </view>
                </view>
            </view>
            <!-- **********************  下拉框 - 带搜索 END  ********************** -->
        </block>

        <block v-else>
            <!-- ********************** 下拉框 - 普通 START ********************** -->
            <view class="picker-wrapper u-flex u-row-left u-col-center">
                <picker mode="selector" :range="selectList" :value="selectValue" @change="selectItem"
                    :range-key="'text'">
                    <view class="picker-value u-font-28" v-if="selectList && selectList.length>0">
                        {{getTextByValue(selectList,selectValue)}}
                        <text class="icon picker-arrow">&#xe65f;</text>
                    </view>
                    <view class="picker-placeholder" v-else>{{placeholder}}</view>
                </picker>
                <!-- **********************  下拉框 - 普通 END  ********************** -->
            </view>
        </block>

    </view>
</template>

<script>
    /**
     * 带搜索功能的下拉框
     * @description 此组件一般用于表单下拉框。
     * @tutorial https://www.dfer.site
     * @property {Array} list 下拉框选项
     * @event {Function} selectHandler 选择下拉框会触发此事件
     * @example <dfer-picker @selectHandler="selectItem" :selectList="item.arr" placeholder="请输入关键词" :extend="index" />
     */
    export default {
        name: "dfer-picker",
        data() {
            return {
                // ********************** 下拉框 START **********************
                selectShowDropdown: false,
                selectSearchText: '',
                selectValue: null,
                selectOptionsOrigin: [],
                selectOptionsNew: [],
                showMask: false
                // **********************  下拉框 END  **********************
            };
        },
        props: {
            selectList: {
                type: Array,
                default () {
                    return [{
                        value: 0,
                        text: '测试'
                    }]
                }
            },
            defaultValue: {
                type: Number,
                default: 0
            },
            placeholder: {
                type: String,
                default: "请输入关键词"
            },
            searchEnable: {
                type: Boolean,
                default: true
            },
            required: {
                type: Boolean,
                default: true
            },
            extend: {
                type: [Array, String, Number, Object],
            },
            trace: {
                type: Boolean,
                default () {
                    return false
                }
            }
        },
        watch: {
            selectList: {
                handler(newVal) {
                    if (this.trace)
                        console.log('handler', newVal);

                    this.selectOptionsOrigin = newVal;
                    this.selectOptionsNew = newVal;
                    if (this.defaultValue)
                        this.selectSearchText = this.getObjectById(this.selectOptionsNew, this.defaultValue).title;
                },
                immediate: true
            }
        },
        created() {},
        methods: {
            // ********************** 下拉框 START **********************
            selectItem(item, index) {
                console.log('selectItem', item);
                if (this.searchEnable) {
                    this.selectValue = item.id;
                    this.selectSearchText = item.title;
                    this.selectShowDropdown = false;
                    this.showMask = false;
                    this.filterOptions();
                } else {
                    this.selectValue = item.detail.value;
                }
                this.$emit('selectHandler', item, this.extend);
            },
            clearSearch() {
                this.selectSearchText = '';
                this.filterOptions();
                this.$emit('selectHandler', {}, this.extend);
            },
            filterOptions() {
                const searchLower = this.lowerTrim(this.selectSearchText);
                this.selectOptionsNew = this.selectOptionsOrigin.filter(item =>
                    item.title && item.title.toLowerCase().includes(searchLower)
                );
            },
            clickMask() {
                this.showMask = false;
                this.selectShowDropdown = false;
            },
            focusInput() {
                this.selectShowDropdown = true;
                this.showMask = true;
            }
            // **********************  下拉框 END  **********************
        }
    }
</script>

<style lang="scss">
    .picker-section {

        .custom-select-container {
            position: relative;

            .mask {
                z-index: 100;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                // background-color: rgba(0, 0, 0, 0.5);
                opacity: 1;
                visibility: visible;
                transition: all 0.3s ease-in-out;
            }

            .search-input-container {
                z-index: 200;
                position: relative;
                margin-bottom: 24rpx;
                background: #f8faff;
                border-radius: 12rpx;
                border: 1rpx solid #e8f1ff;
                padding: 20rpx 24rpx;
                display: flex;
                align-items: center;

                .search-icon {
                    margin-right: 16rpx;
                    flex-shrink: 0;
                }

                .search-input {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333;
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                }

                .clear-icon {
                    z-index: 210;
                    margin-left: 16rpx;
                    flex-shrink: 0;
                    padding: 8rpx;
                }
            }

            .dropdown-list {
                z-index: 300;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #ffffff;
                border: 1rpx solid #e8f1ff;
                border-radius: 12rpx;
                margin-top: 8rpx;
                box-shadow: 0 8rpx 32rpx rgba(41, 121, 255, 0.15);
                max-height: 400rpx;
                overflow: hidden;

                .dropdown-scroll {
                    max-height: 400rpx;

                    .dropdown-item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 24rpx 32rpx;
                        border-bottom: 1rpx solid #f0f6ff;

                        &.selected {
                            background: #e8f1ff;
                        }

                        &:active {
                            background: #f0f6ff;
                        }

                        .item-text {
                            font-size: 28rpx;
                            color: #333;
                            flex: 1;
                        }
                    }

                    .empty-tips {
                        padding: 40rpx;
                        text-align: center;
                        color: #999;
                        font-size: 26rpx;
                    }
                }
            }
        }
    }

    /* 表单项 */
    .form-item {
        margin-bottom: 40rpx;
    }

    .item-label {
        margin-bottom: 20rpx;
    }

    .label-text {
        font-size: 30rpx;
        color: #303133;
        font-weight: 500;
    }

    .required-mark {
        color: #F56C6C;
        margin-left: 8rpx;
    }

    /* 输入框样式 */
    .input-wrapper {
        background-color: #f8f9fa;
        border-radius: 12rpx;
        padding: 0 24rpx;
        height: 80rpx;
        border: 1rpx solid #e4e7ed;
    }

    .input-text {
        flex: 1;
        font-size: 30rpx;
        width: 100%;
        height: 88rpx;
        color: #333333;
    }

    .clear-icon {
        color: #909399;
        font-size: 32rpx;
    }
</style>